웹 브라우저 주소창에 URL을 입력하면 발생하는 일

웹 브라우저에 URL을 입력하는 순간부터, 실제 웹페이지가 내 화면에 보이기까지는 엄청나게 복잡하고 다양한 과정이 차례로 일어납니다. 이 과정은 브라우저 소프트웨어, 운영체제, 각종 네트워크 하드웨어, 여러 종류의 서버, 그리고 수많은 인터넷 표준 프로토콜과 연관되어 있습니다. 먼저 면접에 자주 나오는 내용을 알아보고, OSI 7계층과 같이 생각해보겠습니다.

1. URL 파싱 & 유효성 검증

• 브라우저가 입력한 URL(예: https://www.example.com/index.html?search=cat#top)을 파싱(분해)합니다.
  • 스킴(scheme): http, https, ftp 등 - 어떤 프로토콜을 쓸지 결정
  • 도메인(domain): www.example.com - 웹사이트 주소
  • 포트(port): 생략되어 있으면 기본(HTTP:80/HTTPS:443), 명시되면 그 값(예: :3000)
  • 경로(path): /index.html - 어떤 페이지/리소스에 접근할지
  • 쿼리(query): ?search=cat - 추가 파라미터
  • 프래그먼트(fragment): #top - 페이지 내부 이동(서버에는 전송 X)

브라우저는 이를 통해:

• 사용할 프로토콜을 선택하고,
• #fragment같은 클라이언트 전용 정보는 서버에 전달하지 않게 됩니다.

2. 브라우저 캐시 확인

• 브라우저는 내부 캐시에서 이전에 저장된 DNS 정보, 페이지 파일 등을 먼저 확인해 불필요한 네트워크 반복작업을 줄입니다.
• 자주 방문한 사이트라면 DNS 정보 또는 js/css/이미지 등 정적 리소스를 바로 제공할 수 있습니다.

3. DNS 조회 (Domain Name System)

• 브라우저는 **도메인이 들어 있는 서버의 "IP 주소"**를 알아야 합니다.

  1. 캐시 단계별 확인
     • 브라우저 캐시 → OS(운영체제) 캐시 → 공유기(라우터) 캐시 → ISP(통신사) DNS 캐시 순서로 이미 알고 있는지 먼저 확인합니다.
  2. 캐시에 없으면:
     • 설정된 DNS 리졸버(대부분 통신사/구글 DNS 등)에 쿼리 요청을 보냅니다.
  3. DNS 질의 단계
     • 캐시에 없을 땐, DNS 질의가 루트 → TLD(상위) 서버 → 권한 서버 순서로 흘러가 최종적으로 IP 주소를 받아옵니다(예: 93.184.216.34).

• 하드웨어 관여:

  • NIC(네트워크카드), 스위치, 라우터, 인터넷 백본 등 사용

4. TCP 3-way Handshake

• IP 주소를 알게 된 후, 브라우저는 서버와 네트워크 연결을 시작합니다.
• TCP 연결 과정 (3-way handshake)
  1. SYN: 브라우저 -> 서버 (연결요청)
  2. SYN-ACK: 서버 -> 브라우저 (수신확인 및 동의)
  3. ACK: 브라우저 -> 서버 (확인)
     → 신뢰성 있는 양방향 연결이 만들어집니다.

5. TLS/SSL 핸드셰이크 (HTTPS 사용 시)

• HTTPS라면 TLS/SSL 핸드셰이크가 이어집니다.
  • 브라우저가 인증서 요청
  • 서버가 '[공개키+신뢰기관 서명이 포함된] 인증서' 제공
  • 브라우저가 인증서 유효성 및 위조방지 검증
  • 암호 프로토콜 및 키 교환 방식 협상
  • 서로만 알고 있는 "세션키" 생성 → 이후 모든 통신 내용이 대칭키 방식으로 암호화됨

6. 방화벽 및 프록시 검증

• 클라이언트나 서버가 방화벽/프록시 서버 뒤에 있을 수 있음
• 이들은
  • 보안 및 정책 검증을 수행,
  • 요청을 차단/수정/리디렉션하거나
  • 트래픽을 캐싱하여 효율 개선에도 사용됩니다.

7. HTTP/S 요청 전송

• 연결이 만들어지면 브라우저가 HTTP 요청을 생성해 전송합니다.
  • HTTP 메소드(GET/POST 등)
  • 경로(path), 쿼리(query)
  • HTTP 버전
  • Host 헤더(도메인명), User-Agent 등 각종 헤더
  • 필요한 경우 쿠키, 인증 정보 등도 포함
• 요청은 (HTTPS일 경우 암호화된 채널을 거쳐) 서버로 전달됩니다.

8. 서버 측 처리

• **웹서버 소프트웨어(NGINX, Apache, 클라우드 인스턴스 등)**가 요청을 수신합니다.
• 서버는
  • 정적 파일 즉시 제공(HTML/CSS/JS/이미지 등)
  • 백엔드 어플리케이션(java, node.js 등)을 호출
    • 입력값 검증, 비즈니스 로직, DB/API 통신, 동적 페이지 생성 등
  • HTTP 응답코드를 포함한 응답(예: 200, 404 등)과 함께
  • 헤더, 콘텐츠(HTML, JSON, 이미지 등) 포함해서 브라우저로 반환합니다.

9. 서버 응답 수신

• 브라우저가 서버 응답을 수신합니다(TCP 연결 위, HTTPS라면 암호화 상태).
• 복호화(HTTPS라면): 세션키로 응답 바이트 복호화
• 헤더 파싱: 캐시/쿠키/콘텐츠 타입/압축/리다이렉트 등 각종 정보 확인

10. 브라우저 렌더링 엔진: 파싱 & 페이지 빌드

HTML 파싱:

• HTML을 파싱하여 DOM 트리(문서 객체 모델) 생성
• 과정 중 외부 리소스(CSS/JS/이미지 등) 발견하면 병렬로 추가 요청 진행

CSS 파싱:

• CSS 다운로드 및 파싱, CSSOM 트리 작성

자바스크립트 실행:

• JS 파일 다운로드 및 실행
• DOM 조작, 추가 네트워크 요청, 스타일 변경 등 수행

화면 렌더링 과정:

• DOM + CSSOM 결합 → 렌더 트리 생성
• 브라우저가 레이아웃(위치/크기) 계산 후,
• 페인트 단계: 실제로 화면에 픽셀로 그리기

폰트, 미디어 등

• 웹폰트/이미지/동영상 등도 받아와서 렌더링

11. 추가 요청: 비동기 및 지연 로딩

• 많은 사이트는 동적/비동기로 추가 콘텐츠를 불러옵니다.
  • 이미지/미디어 지연(lazy)로딩
  • JS로 AJAX/XHR/fetch 등 비동기 요청
  • 실시간 업데이트용 웹소켓 등 활용

12. 사용자 상호작용 & 세션 관리

• 페이지가 나온 뒤, 브라우저는 사용자 입력(클릭/키보드/스크롤 등)에 반응
• JavaScript가 이벤트 핸들러 실행, 추가 네트워크 요청 등 처리
• 쿠키, local/session storage 등으로 상태 유지

13. 캐싱 & 영구 스토리지

• 브라우저/중개자(proxy) 캐시에 응답 저장 → 다음 접속 시 빠른 로딩
• 쿠키/Web Storage 등 이용, 사용자 세션/설정값 유지

14. 오류 처리

• 각 과정에서 다양한 오류 발생 가능
  • DNS 실패: "사이트를 찾을 수 없음"
  • 연결 지연/방화벽 차단
  • SSL 인증서 오류: HTTPS 경고 화면
  • 서버 4xx/5xx: 에러 페이지(404, 500 등)
  • JS 런타임 에러: 브라우저 개발자 도구에서 확인

전체 순서 요약표

결론

URL을 입력하는 순간부터 웹페이지가 표시될 때까지, 브라우저는 내부 캐시, DNS, TCP/IP, (필요시) TLS/SSL, HTTP/HTTPS, 각종 렌더링 엔진 등 다양한 SW/HW, 프로토콜을 거쳐 데이터 흐름을 관리합니다.
이 모든 과정이 수백~수천 밀리초 내에 진행되며, 각 단계마다 세부 작업, 최적화, 오류처리가 꼼꼼하게 작동합니다.

추가: OSI 7계층과 하드웨어 관점의 상세 동작

저번 포스트에 올린 OSI 7계층과 이번 포스트를 엮어서 생각해보겠습니다.

1. OSI 7계층별 주요 기능과 하드웨어 연계

2. 웹 브라우저가 URL 입력 이후 OSI 계층별 세부 과정 + 하드웨어 흐름

1계층: 물리 계층 (Physical Layer)

• 역할: 실제 데이터 비트(0/1)를 전기 신호, 광 신호, 무선 신호 형태로 송수신
• 하드웨어:
  • 유선: 이더넷/광케이블, 전기/광 신호 변환
  • 무선: WiFi(무선랜카드), LTE/5G 모뎀
  • NIC(네트워크카드), 허브, 리피터
• 과정:
  • 웹 요청 데이터가 디지털 신호 → 아날로그 파형(전선)/광 펄스(광케이블)로 변환, 전달

2계층: 데이터링크 계층 (Data Link Layer)

• 역할: 신호를 프레임(Ethernet Frame) 단위로 분할, MAC주소로 실제 단말 식별, 오류 감지 및 수정
• 하드웨어:
  • NIC(네트워크 인터페이스 카드): MAC주소 부여/식별
  • 스위치: 목적지 MAC에 따라 프레임 전달
• 과정:
  • PC/서버의 NIC는 데이터에 MAC주소를 포함시켜 프레임을 생성
  • 스위치는 LAN 내에서 목적지 MAC을 보고 프레임을 전달

3계층: 네트워크 계층 (Network Layer)

• 역할: IP주소 기반 패킷 전달/라우팅, 인터넷상의 격리 네트워크 연결
• 하드웨어:
  • 라우터: 패킷의 출발지/목적지 IP보고 네트워크간 포워딩
• 과정:
  • 클라이언트에서 목적지 서버의 IP주소로 패킷 생성
  • 라우터가 IP주소에 따라 여러 네트워크 구간을 넘기며 최적 경로 선택

4계층: 전송 계층 (Transport Layer)

• 역할: TCP/UDP 프로토콜, 신뢰성있는 송수신, 포트번호 관리, 3-way handshake로 연결/흐름/오류 제어
• 하드웨어/소프트웨어:
  • OS 네트워크 스택(TCP/UDP), 네트워크 카드의 오프로드 가속 기능
• 과정:
  • TCP는 연결 수립(SYN–SYN/ACK–ACK), 재전송, 분할, 오류 확인 등 처리
  • 포트번호(예: 443/80/8080 등)로 애플리케이션별 데이터 구분

5계층: 세션 계층 (Session Layer)

• 역할: 세션(대화, 연결)의 생성·유지·종료, 동시 연결 관리, 인증 세션 유지
• 소프트웨어:
  • 운영체제의 세션 관리 모듈
  • 웹서버 세션/쿠키 관리 라이브러리
• 과정:
  • 웹서버 로그인, 인증 유지(SessionID/Token 방식 등)

6계층: 표현 계층 (Presentation Layer)

• 역할: 데이터 포맷 변환(ASCII⇔EBCDIC 등), 암호화/복호화, 압축/해제
• 소프트웨어:
  • TLS/SSL, HTTP 압축/디코딩, 파일포맷 변환
• 과정:
  • HTTPS 암호화(SSL/TLS), 이미지/텍스트 인코딩 변환
  • 압축(html+gzip 등)

7계층: 응용 계층 (Application Layer)

• 역할: 실제 사용자 애플리케이션과 서버의 통신 지원, 웹브라우저·메일·FTP 등
• 소프트웨어:
  • 웹브라우저, 서버 애플리케이션/웹프레임워크
• 과정:
  • 브라우저가 HTTP/HTTPS 요청 생성, 서버가 응답 생성
  • HTML/CSS/JS/이미지 등 처리 및 렌더링

3. OSI 계층 & 하드웨어 관점 시나리오 요약

1. 웹브라우저(7계층)가 URL을 파싱하여 HTTP(S) 요청 생성(6/5/4계층)
2. OS 네트워크 스택이 데이터→TCP/UDP→IP→Ethernet 프레임으로 감싸 처리(4·3·2계층)
3. NIC가 데이터를 신호로 변환, 케이블/무선으로 송출(1계층)
4. 스위치/허브/라우터가 각각 MAC/IP주소에 따라 데이터 경로 결정(2·3계층)
5. 서버까지 도달하면 역순 계층으로 데이터 해제/처리

4. 전체 계층별 하드웨어 연계 표

5. 실무 예시

• **스마트폰(브라우저)**에서 URL 입력
  → W-Fi 무선랜 모듈(1계층)
  → 스마트폰 NIC가 이더넷 프레임 생성(2)
  → 집/회사 공유기(스위치/라우터)(2/3)
  → ISP 라우터(3)
  → 인터넷 백본(1/2/3)
  → 서버 데이터센터(1/2/3), 서버의 NIC수신(2), OS→웹서버 전달(3~7)

정리:
OSI 7계층 모델은 각 계층별로 명확한 역할과, 그에 따른 실제 하드웨어(케이블, NIC, 스위치, 라우터, 서버, 응용프로그램 등)가 협력하여 복잡한 인터넷 통신을 안정적으로 수행하게 만듭니다.